<template>
  <div class="app-container">
    <div v-if="!walletInfo">
      <el-button plain type="primary" @click="insertWallet">初始化钱包</el-button>
    </div>
    <div v-else>
      <div class="wallet-box">
        <div>余额：</div>
        <div style="color: #E6A23C;font-size: 40px">{{walletInfo.money}}</div>
        <div style="margin-left: 10px">元</div>
      </div>
    <!--   收支记录表   -->
      <div>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['api:info:add']"
            >充值</el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table border v-loading="loading" :data="infoList">
          <el-table-column label="类型" align="center" prop="type">
            <template v-slot="scope">
              <el-tag v-if="scope.row.type === 1" type="success">收入</el-tag>
              <el-tag v-if="scope.row.type === 2" type="danger">支出</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="金额" align="center" prop="money" />
          <el-table-column label="备注" align="center" prop="remark" />
          <el-table-column label="时间" align="center" prop="createTime" />
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />

        <!-- 添加或修改钱包收支对话框 -->
        <el-dialog title="充值" :visible.sync="addOpen" width="500px" append-to-body>
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="金额" prop="money">
              <el-input-number v-model="form.money" :max="1000000" placeholder="请输入充值金额" :precision="2" />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入备注" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {getWalletByUserId, addWallet, listInfo, recharge} from "@/api/comment/wallet"
export default {
  name: "wallet",
  props: {
    open: {
      type: Boolean
    },
    userId: {
      type: Number
    }
  },
  watch: {
    open(n, o) {
      if (n)
        this.init();
    }
  },
  data() {
    return {
      //充值开关
      addOpen: false,
      infoList: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        money: null,
        walletId: undefined
      },
      loading: false,
      walletInfo: null,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        money: [
          { required: true, message: "金额不能为空", trigger: "blur" }
        ]
      }
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      if(this.userId) {
        getWalletByUserId(this.userId).then(res => {
          this.walletInfo = res.data;
          this.getList();
        })
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          recharge(this.form).then(res => {
            this.$modal.msgSuccess("充值成功！");
            this.addOpen = false;
            this.getList();
            this.init();
          })
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        money: null,
        walletId: this.walletInfo.id,
        remark: undefined
      };
      this.resetForm("form");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.addOpen = true;
    },
    /** 查询钱包收支列表 */
    getList() {
      this.loading = true;
      this.queryParams.walletId = this.walletInfo.id;
      listInfo(this.queryParams).then(response => {
        this.infoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.addOpen = false;
      this.reset();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('api/info/export', {
        ...this.queryParams
      }, `info_${new Date().getTime()}.xlsx`)
    },
    insertWallet() {
      console.log(this.userId)
      if(!this.userId) {
        this.$modal.msg("操作失败！");
        return
      }
      const param = {
        userId: this.userId
      }
      addWallet(param).then(res => {
        this.$modal.msg("操作成功");
        this.init();
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .wallet-box {
    display: flex;
    flex-direction: row;
    font-size: 28px;
    font-weight: bold;
    align-content: center;
    align-items: center;
  }
</style>
